<template>
  <div class="msgContent">
    <el-card class="box-card">
      <div slot="header">
        <span style="line-height: 36px;">{{msgInfo.title}}</span>
      </div>
      <div class="box-card-body">
        <quill-editor
          ref="myTextEditor"
          v-model="msgInfo.content"
          :options = "editorOption"
          @blur="onEditorBlur($event)">
        </quill-editor>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: 'msgContent',
    data: function () {
      return {
        msgInfo: {
          title: 'this is title',
          content: 'this is a not, dont show everything.'
        },
        editorOption: {
          modules: {
            toolbar: [
              ['bold', 'italic', 'underline', 'strike'],
              ['blockquote', 'code-block'],
              [{ 'header': 1 }, { 'header': 2 }],
              [{'list': 'ordered'}, { 'list': 'bullet' }],
              [{'script': 'sub'}, { 'script': 'super' }],
              [{'indent': '-1'}, { 'indent': '+1' }],
              [{ 'direction': 'rtl' }],
              [{ 'size': ['small', false, 'large', 'huge'] }],
              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
              [{ 'color': [] }, { 'background': [] }],
              [{ 'font': [] }],
              [{ 'align': [] }],
              ['clean']
            ]
          },
          placeholder: 'enter message info',
          theme: 'snow'
        }
      }
    },
    watch: {
      content: function (curVal, oldVal) {
        console.log(curVal, oldVal)
      }
    },
    methods: {
      onEditorBlur (editor) {
        let _this = this
        _this.$http.post('/msg/update', _this.msgInfo).then(res => {
        }).catch(res => {
          console.log(res)
        })
      }
    },
    created () {
      let _this = this
      let id = _this.$route.params.id
      _this.$http.get('/msg/info?id=' + id).then(res => {
        _this.msgInfo = res.data.result
      }).catch(res => {
        console.log(res)
      })
    }
  }
</script>

<style>
  .msgContent
  {
    margin-top: 5px;
    text-align: left;
  }
  .box-card-body
  {
    padding: 15px;
  }
  .ql-editor
  {
    height: 360px!important;
  }

</style>

